<template>
  <page :nav="false" ref="pageRef" custom-class="paddingB10">
    <view class="pagae-nav" :style="{ paddingTop: statusBarHeight + 'px' }">
      <view class="flex-align" style="height: 72rpx">
        <view class="bold font8 color-white marginL14">超级商城</view>
      </view>
    </view>
    <view style="margin: 20rpx 7px 0" v-if="list" class="flex-wrap">
      <view class="search">
        <image class="search_bg" :src="resource.bgInput" />
        <view class="search_title flex-align paddingX12"></view>
        <view class="search_content flex-align">
          <image
            class="img"
            style="color: #fff; width: 32rpx"
            :src="resource.wow_search"
          />
          <input
            class="paddingL8 font1"
            style="color: #fff; width: 100%"
            confirm-type="search"
            placeholder="搜索你感兴趣的～"
            v-model.trim="inputValue"
            @confirm="getData"
          />
          <text class="text" @click="getData">搜索</text>
        </view>
        <view class="search_icon flex-align-between">
          <view
            class="icon_item flex-align"
            v-for="(item, index) in iconList"
            :key="index"
          >
            <image class="img" :src="item.icon" />
            <text
              class="marginL4"
              style="color: rgba(255, 255, 255, 0.6); font-size: 22rpx"
            >
              {{ item.title }}
            </text>
          </view>
        </view>
      </view>
      <view v-if="![0, 3].includes(skipeType)" class="spike paddingX10">
        <view class="spike_title paddingX10" @click.stop="toSpike">
          <image class="spike_img" :src="resource.spike_into_top" />
          <view class="title">限时秒杀</view>
          <view class="title_right">更多</view>
        </view>
        <view class="spike_content flex scroll-x nowrap paddingX10">
          <view class="nowrap flex">
            <view
              class="spike_item"
              v-for="(data, index) in spikeList"
              :key="index"
              @click="showDetail(data)"
            >
              <view class="item_img width100">
                <image mode="widthFix" :src="data.mallGoodsVO.cover" />
              </view>
              <view class="item_name paddingX10 width100">
                <view class="name line-ellipsis marginY3">
                  {{ data.mallGoodsVO.name }}
                </view>
                <view class="marginT5 font6">¥{{ data.subjectPrice }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="paddingX16" style="width: 100%">
        <tabbar @change="clickTab" custom-class="flex-align-between" />
      </view>
      <empty v-if="isEmpty" :top="100" style="width: 100%" />
      <view class="visible-hiddle-caculate" style="width: 50%">
        <view id="caculate-demo">
          <goods-cell v-if="demo" :data="demo" />
        </view>
      </view>
      <view class="flex paddingY15" style="width: 100%">
        <view class="flex1">
          <view id="left ">
            <goods-cell v-for="item in list" :key="item.id" :data="item" />
          </view>
        </view>
        <view class="flex1">
          <view id="right">
            <goods-cell v-for="item in list2" :key="item.id" :data="item" />
          </view>
        </view>
      </view>
    </view>
  </page>
</template>

<script>
import goodsCell from './cell';
import tabbar from '@/components/vip-tabbar';
import resource from '@/utils/resource';
import empty from '@/components/empty';

export default {
  components: { goodsCell, tabbar, empty },

  data() {
    return {
      resource,
      requesing: false,
      list: [],
      list2: [],
      demo: null,
      isEmpty: false,
      tab: null,
      inputValue: '',
      sellType: '',
      iconList: [
        {
          icon: resource.wow_zheng,
          title: '正品保证',
        },
        {
          icon: resource.wow_zhi,
          title: '平台直营',
        },

        {
          icon: resource.wow_xin,
          title: '全新未拆',
        },
        {
          icon: resource.wow_shou,
          title: '售后无忧',
        },
      ],
      subjectId: 1,
      skipeType: 0, // 0: 不存在秒杀活动  1: 秒杀活动未开始  2:开始 3: 结束
      current: 1,
      size: 15,
      leftHeight: 0,
      rightHeight: 0,
      spikeList: [],
      startTime: '',
    };
  },
  computed: {
    statusBarHeight() {
      if (this.$store.state.systemInfo) {
        return this.$store.state.systemInfo.statusBarHeight;
      }
      return 20;
    },
  },
  onLoad() {
    this.$event.on(this.$event.key.LOGIN, this.getData);
  },
  onUnload() {
    this.$event.off(this.$event.key.LOGIN);
  },
  mounted() {
    this.toSpike('init');
    this.getData();
  },
  onShareAppMessage(res) {
    return {
      title: '超级玛特 次元聚集地，潮玩新势力',
      path: '/pages/vip/index',
    };
  },
  onShareTimeline() {
    return {
      title: '超级玛特 次元聚集地，潮玩新势力',
    };
  },
  onPullDownRefresh() {
    this.toSpike('init');
    this.getData();
  },
  methods: {
    async getData(loading = false) {
      if (this.requesing) return;
      this.requesing = true;
      const res = await this.$service.mall.list(
        {
          current: this.current,
          size: this.size,
          keyword: this.inputValue,
          categoryId: this.tab === 0 ? '' : this.tab,
          sellType: this.sellType === 0 ? '' : this.sellType,
        },
        loading
      );
      if (this.current === 1) {
        this.demo = null;
        this.list = [];
        this.list2 = [];
        this.leftHeight = 0;
        this.rightHeight = 0;
      }
      let array1 = [...this.list];
      let array2 = [...this.list2];
      for (let i = 0; i < res.length; i++) {
        let item = res[i];
        let height = await this.getHeight(item);
        if (this.leftHeight <= this.rightHeight) {
          array1.push(item);
          this.leftHeight += height;
        } else {
          array2.push(item);
          this.rightHeight += height;
        }
      }
      this.list = array1;
      this.list2 = array2;
      uni.stopPullDownRefresh();
      this.requesing = false;
      this.isEmpty = this.list.length === 0;
    },
    clickTab(value, type) {
      this.current = 1;
      this.tab = value;
      this.sellType = type;
      this.getData(true);
    },
    getHeight(item) {
      this.demo = item;
      const query = wx.createSelectorQuery();
      return new Promise((resolve, reject) => {
        this.$nextTick(() => {
          setTimeout(() => {
            query.select('#caculate-demo').boundingClientRect();
            query.exec((res) => {
              if (res[0]) {
                resolve(res[0].height);
              }
              resolve(100);
            });
          }, 5);
        });
      });
    },
    async toSpike(type) {
      this.$service.mall.spikeTimer(this.subjectId).then((res) => {
        if (type === 'init') {
          this.skipeType = res.timeStatus;
          this.startTime = res.startTime;
          if (![0, 3].includes(res.timeStatus)) {
            this.getSpikeList();
          }
        } else {
          this.$router.pushCheck('spike', { subjectId: this.subjectId });
        }
      });
    },
    getSpikeList(loading = false) {
      this.$service.mall
        .spikeList(
          {
            current: 1,
            size: 6,
            subjectId: 1,
          },
          loading
        )
        .then(async (res) => {
          this.spikeList = res.records;
        });
    },
    showDetail(row) {
      this.toSpike('init');
      let self = this;
      uni.navigateTo({
        url:
          '/subPackages/pages/product/index?id=' +
          row.mallGoodsVO.id +
          '&skipeType=' +
          self.skipeType +
          '&startTime=' +
          self.startTime +
          '&subjectId=' +
          row.subjectId,
      });
    },
  },
  onReachBottom() {
    let allData = [...this.list, ...this.list2];
    if (allData.length > 0 && allData.length % this.size === 0) {
      this.current += 1;
      this.getData(true);
    }
  },
};
</script>
<style>
page {
  background: #222335;
}
</style>
<style lang="scss" scoped>
.bg {
  position: fixed;
  z-index: -1;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.pagae-nav {
  // position: fixed;
  // top: 0;
  // left: 0;
  // width: 100%;
  // z-index: 1800;
}
.item {
  padding: 16rpx 20rpx 20rpx;
}
.nav-title {
  width: 212rpx;
  height: 24rpx;
  margin-left: 28rpx;
}
.tag {
  height: 26rpx;
  line-height: 26rpx;
  padding: 0 10rpx;
  background: #e7d5ff;
  border-radius: 13rpx;
  font-size: 20rpx;
}
.search {
  position: relative;
  width: 100%;
  .search_bg {
    position: absolute;
    top: -30rpx;
    width: 741rpx;
    height: 137rpx;
    margin: 0 auto;
  }
  .search_title {
    width: 686rpx;
    height: 78rpx;
    background: #ffffff;
    border-radius: 16rpx;
    opacity: 0.08;
    margin: 0 auto;
  }
  .search_content {
    position: absolute;
    top: 18rpx;
    left: 6%;
    width: 90%;
    padding: 0 20rpx;
    .text {
      color: $color-theme;
      width: 100rpx;
      text-align: center;
    }
  }
  .img {
    width: 28rpx;
    height: 28rpx;
  }
  .search_icon {
    width: 640rpx;
    margin: 24rpx auto 36rpx;
  }
}
.spike {
  position: relative;
  height: 426rpx;
  width: 686rpx;
  .spike_title {
    width: 100%;
    height: 140rpx;
    .spike_img {
      position: absolute;
      left: 20rpx;
      top: 0;
      width: 100%;
      height: 144rpx;
      z-index: -1;
    }
    .title {
      color: #fff;
      font-size: 60rpx;
      position: absolute;
      top: 20rpx;
      left: 40rpx;
    }
    .title_right {
      width: 124rpx;
      height: 55rpx;
      color: #fff;
      font-size: 30rpx;
      line-height: 55rpx;
      text-align: center;
      position: absolute;
      top: 26rpx;
      right: 24rpx;
      border: 1rpx solid #fff;
      border-radius: 25rpx;
    }
  }
  .spike_content {
    height: 282rpx;
    width: 686rpx;
    background-color: #934ff8;
    border-radius: 0 0 25rpx 25rpx;
    .spike_item {
      position: relative;
      width: 220rpx;
      height: 260rpx;
      border-radius: 16rpx;
      overflow: hidden;
      margin-right: 20rpx;
      .item_img {
        height: 168rpx;
      }
      .item_name {
        position: absolute;
        bottom: 0;
        color: #fff;
        font-size: 26rpx;
        width: 100%;
        height: 96rpx;
        background-color: rgba(0, 0, 0, 0.3);
      }
    }
    .spike_item:last-child {
      margin-right: 0;
    }
  }
}
.visible-hiddle-caculate {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  visibility: hidden;
}
</style>
